<template>
	<view class="cu-modal bottom-modal" :class="{ show: showModal }" @tap="hideModal">
		<view class="cu-dialog shop-modal" @tap.stop style="background: none;">
			<view class="modal-box page_box">
				<view class="modal-head x-bc">
					<text></text>
					<text class="head-title">选择优惠券</text>
					<text class="cuIcon-roundclosefill" @tap="hideModal"></text>
				</view>
				<view class="modal-content content_box y-f">
					<!-- 	<label class="radio-item x-bc" @click="dan_xuan">
						//@tap="selCoupon(0)"
						<text class="coupon-title">不使用优惠券</text>
						<view v-show="shiyong" style="width: 42rpx;height: 42rpx;border-radius: 50rpx;margin-right: 5rpx;">
							<image src="../../../static/danxuan.png" style="width: 42rpx;height: 42rpx;"></image>
						</view>
						<view
							v-show="!shiyong"
							style="width: 42rpx;height: 42rpx;border: 1rpx solid #C0C4CC;border-radius: 50rpx;margin-right: 5rpx;"
						></view>
					</label> -->
					<!-- pickerData.couponList   {{ `满${item.enough}减${item.amount}` }}     -->

					<view class="">
						<!-- <u-checkbox-group @change="checkboxGroupChange">
							
							
							
							<u-checkbox
								@change="checkboxChange"
								v-model="item.checked"
								v-for="(item, index) in pickerData.couponList"
								:key="index"
								:name="item.id"
							>
								{{ item.name }}:{{ `满${item.enough}减${item.amount}` }}
							</u-checkbox>
						</u-checkbox-group>



						<u-checkbox-group @change="checkboxGroupChange">
							<u-checkbox
								@change="checkboxChange"
								v-model="item.checked"
								v-for="(item, index) in list"
								:key="index"
								:name="item.name"
							>
								{{ item.name }}
							</u-checkbox>
						</u-checkbox-group> -->
						<view>
							<checkbox-group @change="checkboxChange">
								<label
									class="uni-list-cell uni-list-cell-pd"
									v-for="(item, index) in pickerData.couponList"
									:key="index"
									style="display: flex; justify-content: space-around; margin-top: 10rpx;"
								>
									<view>{{ item.name }}:{{ `满${item.enough}减${item.amount}` }}</view>
									<view style="margin-left: 10rpx;"><checkbox :value="item.user_coupons_id" :checked="!item.checked" /></view>
									<!-- <view style="margin-left: 10rpx;"><checkbox :value="item.amount" :checked="!item.checked" /></view> -->
								</label>
							</checkbox-group>
						</view>
					</view>
				</view>
				<view class="modal-foot x-c"><button class="cu-btn serve-btn" @tap="saveCoupon">确定</button></view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 选择优惠券模态框
 * @property {Boolean} showModal - v-model="false" 显隐
 * @property {Object} pickerData - 可用优惠券列表数据
 *
 */
export default {
	props: {
		value: {},
		pickerData: {}
	},
	// props: ['value', 'pickerData'],

	// computed: {
	// 	normalizedSize: function() {
	// 		return this.pickerData.trim().toLowerCase();
	// 	}
	// },
	components: {},

	data() {
		return {
			data: this.pickerData,
			radioId_a: [],
			shiyong: true,
			duo: true,
			duo_xuan: [],
			arr: [],
			list: [
				{
					name: 'apple222',
					checked: true
				},
				{
					name: 'banne22r',
					checked: false
				},
				{
					name: 'ora333nge',
					checked: true
				}
			]
		};
	},

	computed: {
		showModal: {
			get() {
				return this.value;
			},
			set(val) {
				this.$emit('input', val);
			}
		}
	},
	methods: {
		checkboxChange(e) {
			console.log('e :>> ', e);
			this.arr = e.detail.value;
			console.log("this.arr: ",this.arr);
		},

		// 全选
		checkedAll() {
			this.list.map(val => {
				val.checked = true;
			});
		},
		duoxuan_kuang(t) {
			this.radioId_a = this.radioId_a.concat(t);
			this.xuanzhong = this.radioId_a.indexOf(t);
		},
		hideModal() {
			console.log('点击选择优惠卷')
			this.showModal = false;
		},

		saveCoupon() {
			this.showModal = false;
			this.$emit('arr', this.arr);
		},
		dan_xuan() {
			this.shiyong = !this.shiyong;
		}
	}
};
</script>

<style lang="scss">
/deep/.u-checkbox {
	width: 91vw !important;
	display: flex;
	justify-content: space-between;
}
.modal-box {
	width: 750rpx;
	height: 700rpx;
	border-radius: 30rpx 30rpx 0 0;
	background: #fff;
	padding: 30rpx;

	.serve-btn {
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
		margin-top: 40rpx;
	}

	.modal-head {
		margin-bottom: 30rpx;

		.head-title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.cuIcon-roundclosefill {
			font-size: 34rpx;
			color: #e0e0e0;
		}
	}

	.modal-content {
		.radio-item {
			width: 100%;
			padding: 10rpx 0;
			.coupon-title {
				font-size: 28rpx;
			}
			.coupon-radio {
				transform: scale(0.8);
			}
		}
	}
	.uni-radio-input-checked {
		background-color: #f37b1d !important;
		border: #f37b1d !important;
	}
}
</style>
